//清除所有html空格
let clearHtmlNbsp = txt => txt.replace(/&amp;nbsp;/ig, "");


//清除所有空⾏（摘录⽹上，实测可⽤）
let clearNbsp = (txt) => {
    var arrPattern = [
        '<p(>|\\s+[^>]*>)(&amp;nbsp|&amp;nbsp;|\\s||<br\\s*(\/)?>)*<\/p(>|\\s+[^>]*>)',
        '(<br\\s*(\/)?>((\\s|&amp;nbsp;|&amp;nbsp|)*)){2,}',
        '(<p(>|\\s+[^>]*>))((&amp;nbsp|&amp;nbsp;|\\s)*<br\\s*(\/)?>)*((.|\n|\r)*?<\/p(>|\\s+[^>]*>))'
    ];
    var arrReplace = ['', '<br />$3', '$1$6'];
    for (var i = 0; i < arrPattern.length; i++) {
        var arrRegExp = new RegExp(arrPattern[i], 'img');
        txt = txt.replace(arrRegExp, arrReplace[i]);
    }
    return txt
}


//清除所有⾮空格的空⽩字符，空格字符去除可能导致元素属性出错
let clearNoNbsp = txt => txt.replace(/[\f\n\r\t\v]/ig, "");

//清除所有span
let clearSpan = txt => txt.replace(/<(\/span|span).*?>/ig, "");

//清除超链接，将⽹址分离在后
let clearLink = (txt) => {
    txt = txt.replace(/<a.*?href\s*=\s*[\"|\'](.*?)[\"|\'].*?>(.*?)<\/a>/ig, "$2[⽹址：$1]");
    //实际运行中发现有些错误的，a链接可能根本就没有href，所以需要再次清理
    return txt = txt.replace(/<(\/a|a).*?>/ig, "");
}

//清除所有class，为防⽌有些class不加引号，因此强制规定只清除元素内的class，这种写法最笨和直观，聪明的看下一个
let clearClass = txt => txt.replace(/<([a-zA-Z1-6]+)(.*?)\s*class\s*=\s*[\"|\']?.*?[\"|\']\s*(.*?)>?/ig, "<$1 $2 $3>");

//清除所有style属性//直接量语法：
let clearStyle = txt => txt.replace(/style\s*?=\s*?([\'\"])[\s\S]*?\1/ig, "");
//RegExp对象语法，可⽤于⾃定义变量，⽐如出了style以外的class，lang等等
// var v = "style";
// txt = txt.replace(new RegExp(v + "\\s*?=\\s*?([\'\"])[\\s\\S]*?\\1", "ig"), "");

//清除所有元素属性，超链接可能被清除
let clearElement = txt => txt.replace(/<([a-zA-Z1-6]+)(\s*[^>]*)?>/ig, "<$1>");

//给元素加上样式
let setHtmlStyle = (htmlString, tagName, styleString) => {
    // let reg = new RegExp(`<${element}.*?>`, 'ig')
    // return txt.replace(reg, `<${element} style="${style}">`);

    // 匹配指定开启标签的正则表达式
    //   const regex = new RegExp(`<${tagName}\\b[^>]*>`, 'gi');
    //   // 将匹配到的所有标签都加上样式
    //   const newHtmlString = htmlString.replace(regex, (match) => {
    //     const newTag = match.replace(/style="[^"]*"/gi, ''); // 删除原有的style属性
    //     if (tagName === 'img') {
    //       return `<span style="${styleString}">${newTag}</span>`; // 将img标签转换成span标签，并在span标签上添加样式
    //     } else {
    //       return newTag.replace(/<\s*/g, `<span style="${styleString}" `) // 在标签前面加上样式
    //                   .replace(/>\s*/g, '>') // 删除标签内空白字符
    //                   .replace(`</${tagName}>`, '</span>'); // 替换标签结束符
    //     }
    //   });
    //   return newHtmlString;

    // const regex = new RegExp(`<${tagName}\\b[^>]*>`, 'gi');
    //   const newHtmlString = htmlString.replace(regex, (match) => {
    //     const newTag = match.replace(/style="[^"]*"/gi, '');
    //     if (tagName === 'img') {
    //       return `<span style="${styleString}">${newTag}</span>`;
    //     } else {
    //       return newTag.replace(/</g, '<') // 将 '<' 替换为 '<'
    //                   .replace(/<\s*/g, `<span style="${styleString}" `)
    //                   .replace(/>\s/g, '>')
    //                   .replace(`</${tagName}>`, '');
    //     }
    //   });
    //   return newHtmlString;

    const regex = new RegExp(`<${tagName}\\b[^>]*>[\\s\\S]*?<\\/\\s*${tagName}>`, 'gi'); // 修改正则表达式匹配规则，匹配整个标签及其内容
    const newHtmlString = htmlString.replace(regex, (match) => {
        // 将标签的内容提取出来，因为标签本身不能直接加样式，需要将样式应用到标签内的内容上
        const tagContent = match.replace(new RegExp(`<\\s*${tagName}\\b[^>]*>|<\\/\\s*${tagName}>`, 'gi'), '');
        const tagStyle = `style="${styleString}"`;
        // 根据标签类型，将样式应用到不同的标签上
        if (tagName === 'img') {
            return `<span ${tagStyle}>${match}</span>`;
        } else {
            return `<${tagName} ${tagStyle}>${tagContent}</${tagName}>`;
        }
    });
    return newHtmlString;
}

//给元素加上CLASS
let setHtmlClass = (txt, element, className) => {
    let reg = new RegExp(`<${element}.*?>`, 'ig')
    return txt.replace(reg, `<${element} class="${className}">`);
}

//去除除img标签外其它标签
let clearNonPicture = txt => txt.replace(/<(?!img).*?>/g, "");
//如果保留img,p标签，则为：
let clearNonPictureOrP = txt => txt.replace(/<(?!img|p|\/p).*?>/g, "");

//另一种方式给富文本设置样式
let setStyleToRichText = function setStyleToRichText(richText, styles) {
    // 创建一个临时的 div 元素，用于操作富文本字符串
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = richText;
    // 遍历每个样式对象，分别处理对应的标签
    Object.keys(styles).forEach((selector) => {
        const style = styles[selector];
        // 获取所有指定标签元素
        const elements = tempDiv.querySelectorAll(selector);
        // 遍历每个元素，设置样式
        elements.forEach((element) => {
            Object.assign(element.style, style);
            // 如果该元素包含嵌套样式，递归处理
            Object.keys(style).forEach((tag) => {
                if (tag[0] !== '_') {
                    const nestedStyle = style[tag];
                    const nestedElements = element.querySelectorAll(tag);
                    nestedElements.forEach((nestedElement) => {
                        Object.assign(nestedElement.style, nestedStyle);
                    });
                }
            });
        });
    });
    // 返回处理后的富文本字符串
    return tempDiv.innerHTML;
}

//修复word复制过来的一些问题
let convertWordToHtml = function (wordText) {
    // 将 Word 文档文本转换成 HTML
    const htmlText = wordText
        // 去除多余的空格、换行等字符
        .replace(/\s+/g, ' ')
        // 将段落分隔符替换成 HTML 的换行标签
        .replace(/\r\n/g, '<br>')
        // 将制表符替换成 HTML 的制表符标签
        .replace(/\t/g, '&emsp;')
        // 将所有单元格分隔符替换成表格的 HTML 代码
        .replace(/\|/g, '</td><td>')
        // 将所有行分隔符替换成表格的 HTML 代码
        .replace(/\n/g, '</td></tr>\n<tr><td>')
        // 将表格的 HTML 代码包装在表格标签中
        .replace(/<tr><td>/, '<table><tr><td>')
        .replace(/<\/td><\/tr>$/, '</td></tr></table>');

    // 创建一个临时的 div 元素，用于操作 HTML 字符串
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = htmlText;
    // 遍历所有的 td 元素，设置样式
    const tdElements = tempDiv.querySelectorAll('td');
    tdElements.forEach((td) => {
        // 如果 td 元素中包含换行符，则设置为多行文本
        if (td.innerHTML.includes('<br>')) {
            td.style.whiteSpace = 'pre-wrap';
            td.style.wordWrap = 'break-word';
        }
        // 如果 td 元素中包含 colspan 或 rowspan 属性，则设置相应的属性
        if (td.colSpan > 1) {
            td.setAttribute('colspan', td.colSpan);
        }
        if (td.rowSpan > 1) {
            td.setAttribute('rowspan', td.rowSpan);
        }
    });
    // 返回处理后的 HTML 字符串
    return tempDiv.innerHTML;
}


export {
    clearHtmlNbsp,
    clearNbsp,
    clearNoNbsp,
    clearSpan,
    clearLink,
    clearClass,
    clearStyle,
    clearElement,
    setHtmlStyle,
    setHtmlClass,
    clearNonPicture,
    clearNonPictureOrP,
    setStyleToRichText,
    convertWordToHtml,
}